<template>
  <div>
    <div v-show="this.$route.params.detailId == 1" class="full-page absolute">
      <header>
        <i class="iconfont icon-arrow-left" @click="back"></i>
        <h3>赞与收藏</h3>
      </header>
      <!--  -->
      <ul class="ul">
        <li class="list" v-for="(item, index) in list" :key="index">
          <router-link to="/otheruser">
            <div class="li_left">
              <img class="avatar" :src="item.avatar" alt="" />
              <div class="content">
                <span class="username">{{ item.username }}</span>
                <p>
                  赞了你的{{ item.type }}<span>{{ item.date }}</span>
                </p>
              </div>
            </div>
          </router-link>
          <div class="li_right">
            <router-link to="/detail"> <img :src="item.fengmian" alt="" /></router-link>
          </div>
        </li>
      </ul>
      <!-- 底线 -->
      <div class="dixian">
        <img src="https://cdn7.axureshop.com/demo/1934191/images/%E8%8F%9C%E5%8D%95/u486.png"
          alt="" /><span>我是有底线的</span><img
          src="https://cdn7.axureshop.com/demo/1934191/images/%E8%8F%9C%E5%8D%95/u486.png" alt="" />
      </div>
    </div>
    <div v-show="this.$route.params.detailId == 2" class="full-page absolute">
      <header>
        <i class="iconfont icon-arrow-left" @click="back"></i>
        <h3>评论与@</h3>
      </header>
      <!--  -->
      <ul class="ul2">
        <li class="list2" v-for="(item, index) in list2" :key="index">
          <router-link to="/otheruser">
            <div class="top2">
              <img class="avatar" :src="item.avatar" alt="" />
              <div>
                <span class="username">{{ item.username }}</span>
                <p class="date">{{ item.date }}</p>
              </div>
            </div>
          </router-link>
          <p class="pinlun">{{ item.pinlun }}</p>
        <router-link to="/detail">  <div class="content2">
            <img :src="item.fengmian" alt="" />
            <span>{{ item.title }}</span>
          </div></router-link>
        </li>
      </ul>
      <!-- 底线 -->
      <div class="dixian">
        <img src="https://cdn7.axureshop.com/demo/1934191/images/%E8%8F%9C%E5%8D%95/u486.png"
          alt="" /><span>我是有底线的</span><img
          src="https://cdn7.axureshop.com/demo/1934191/images/%E8%8F%9C%E5%8D%95/u486.png" alt="" />
      </div>
    </div>
    <div v-show="this.$route.params.detailId == 3" class="full-page absolute">
      <header>
        <i class="iconfont icon-arrow-left" @click="back"></i>
        <h3>新增粉丝@</h3>
      </header>
      <!--  -->
      <ul class="ul3">
        <li class="list3" v-for="(item, index) in list3" :key="index">
          <router-link to="/otheruser"><div class="right_3">
            <img :src="item.avatar" alt="" />
            <div>
              <p class="username">{{ item.username }}</p>
              <span class="date">{{ item.date }}</span>
            </div>
          </div></router-link>
          <div class="left_3">
            <span>+ 关注</span>
          </div>
        </li>
      </ul>
      <!-- 底线 -->
      <div class="dixian">
        <img src="https://cdn7.axureshop.com/demo/1934191/images/%E8%8F%9C%E5%8D%95/u486.png"
          alt="" /><span>我是有底线的</span><img
          src="https://cdn7.axureshop.com/demo/1934191/images/%E8%8F%9C%E5%8D%95/u486.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    console.log(this.$route.params.detailId);
  },
  data() {
    return {
      list: [
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u351.png",
          type: "作品",
          date: "02-20",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "西瓜",
        },
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u351.png",
          type: "菜谱",
          date: "02-20",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "西瓜",
        },
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u351.png",
          type: "作品",
          date: "02-20",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "西瓜",
        },
        {
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u351.png",
          type: "作品",
          date: "02-20",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "西瓜",
        },
      ],
      list2: [
        {
          title: "超级简单的黑深林蛋糕做法，小白也会做",
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u351.png",
          pinlun: "看着食欲满满，感觉做起来也不是很难，谢谢博主分享",
          date: "3分钟前",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "西瓜",
        },
        {
          title: "今日午饭，简简单单",
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u351.png",
          pinlun: "谢谢博主分享",
          date: "3分钟前",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "西瓜",
        },
        {
          title: "超级简单的黑深林蛋糕做法，小白也会做",
          fengmian:
            "https://cdn7.axureshop.com/demo/1934191/images/%E6%90%9C%E7%B4%A2%E7%BB%93%E6%9E%9C/u351.png",
          pinlun: "看着食欲满满，感觉做起来也不是很难，谢谢博主分享",
          date: "3分钟前",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "西瓜",
        },
      ],
      list3: [
        {
          date: "3分钟前",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "西瓜",
        },
        {
          date: "3分钟前",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "西瓜",
        },
        {
          date: "3分钟前",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "西瓜",
        },
        {
          date: "3分钟前",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "西瓜",
        },
        {
          date: "3分钟前",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "西瓜",
        },
        {
          date: "3分钟前",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "西瓜",
        },
        {
          date: "3分钟前",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "西瓜",
        },
        {
          date: "3分钟前",
          avatar:
            "https://cdn7.axureshop.com/demo/1934191/images/%E9%A6%96%E9%A1%B5/u136.png",
          username: "西瓜",
        },
      ],
    };
  },
  methods: {
    back() {
      this.$router.back();
    },
  },
};
</script>

<style scoped lang="scss">
.list3 {
  width: 90%;
  margin: 0px auto;
  display: flex;
  padding: 10px 0px;
  // line-height: 60px;
  justify-content: space-between;
  box-sizing: border-box;

  .right_3 {
    display: flex;

    img {
      border-radius: 50%;
      margin-right: 10px;
      width: 40px;
      height: 40px;
    }

    span {
      color: #999999;
      margin-top: 10px;
      font-size: 12px;
      line-height: 30px;
    }
  }

  .left_3 {
    width: 70px;
    height: 30px;
    // padding: 0px 10px;
    background: #666ee8;
    text-align: center;
    border-radius: 25px;
    margin-top: 8px;

    // box-sizing: border-box;
    span {
      //
      line-height: 30px;
      display: inline-block;
      font-size: 14px;
      width: 60px;
      color: #fff;
    }
  }
}

.list2 {
  width: 90%;
  margin: 0px auto;

  padding: 10px 0px;
  // line-height: 60px;
  box-sizing: border-box;

  .top2 {
    display: flex;

    .avatar {
      border-radius: 50%;
      margin-right: 5px;
      width: 40px;
      height: 40px;
    }

    .username {
      color: #000521;
    }

    .date {
      color: #999999;
      margin-top: 10px;
      font-size: 12px;
      // line-height: 30px;
    }
  }

  .pinlun {
    font-size: 14px;
    line-height: 50px;
  }

  .content2 {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;

    img {
      width: 40px;
      height: 40px;
      border-radius: 5px;
      // margin-right: 10px;
    }

    span {
      color: #999999;
      background: #e2e2e243;
      font-size: 12px;
      padding-left: 10px;
      line-height: 40px;
      width: calc(100% - 40px);
      // width: 100%;
    }
  }
}

.yc {
  display: none;
}

.dixian {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  font-size: 12px;
  color: #ccc;

  span {
    margin: 0 50px;
  }
}

.ul {
  .list {
    width: 90%;
    margin: 0px auto;
    height: 80px;
    padding: 10px 0px;
    // line-height: 60px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;

    .li_left {
      display: flex;

      .avatar {
        border-radius: 50%;
        margin-right: 5px;
        width: 40px;
        height: 40px;
      }

      .content {
        .username {
          color: #000521;
        }

        p {
          color: #999999;
          font-size: 12px;
          line-height: 30px;

          span {
            margin-left: 5px;
          }
        }
      }
    }

    .li_right {
      img {
        width: 40px;
        height: 40px;
        border-radius: 5px;
      }
    }
  }
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: #ffffff;
}

header {
  height: 50px;
  line-height: 50px;

  i {
    font-size: 18px;
    position: absolute;
    left: 20px;
  }

  h3 {
    text-align: center;
    font-weight: 700;
  }
}</style>